<template>
  <DataTablePage
    ref="table"
    mainColumn="title"
    resource="/dxbase/push/notice"
    title="推送公告"
    label="公告"
    labelName="title"
    dialogSize="lg"
    :toolbar="toolbar"
    :operation="operation"
    :operationWidth="60"
    :tableFullList="tableFullList"
    :tableInitList="tableInitList"
    :filterFullList="filterFullList"
    :filterInitList="filterInitList"
    :createList="createList"
    :updateList="updateList"
    :createButtonList="createButtonList"
    :updateButtonList="updateButtonList"
    :createFormValues="createFormValues"
    :columns="columns"
  />
</template>

<script>
import DataTablePage from '@/containers/DataTablePage'
import { toolbarCreate } from '@/containers/DataTablePage/toolbar'
import { operationUpdate } from '@/containers/DataTablePage/operation'
import { cloneDeep } from 'lodash'
import { treeChildren } from '@/utils/common'

export default {
  name: 'Notice',
  components: {
    DataTablePage
  },
  data () {
    const createButton = {
      name: 'submit',
      label: '保存',
      type: 'complete',
      validate: true,
      funcProps: {
        tablePage: this
      },
      func ({funcProps}) {
        const { form, button, tablePage, callback } = funcProps
        const { table } = tablePage.$refs
        button.loading = true
        table.$post({
          url: table.resource,
          data: form.formValues
        }).then(data => {
          button.loading = false
          if (data) {
            if (callback) {
              callback(table, data)
            } else {
              table.getData()
              table.dialogVisible = false
            }
          }
        })
      }
    }
    const updateButton = {
      name: 'submit',
      label: '保存',
      type: 'complete',
      validate: true,
      funcProps: {
        tablePage: this
      },
      func ({funcProps}) {
        const { form, button, tablePage, callback } = funcProps
        const { table } = tablePage.$refs
        button.loading = true
        table.$put({
          url: `${table.resource}/${form.formValues.id}`,
          data: form.formValues
        }).then(data => {
          button.loading = false
          if (data) {
            if (callback) {
              callback(table, data, form.formValues.id)
            } else {
              table.getData()
              table.dialogVisible = false
            }
          }
        })
      } /* 编辑表单的提交事件 */
    }
    return {
      toolbar: [{
        ...toolbarCreate
      }],
      operation: [{
        ...operationUpdate,
        func ({funcProps}) {
          const target = {
            show: ['title', 'text', 'isAll'],
            hide: ['title', 'text', 'isAll', 'orgId', 'userIds']
          }
          const { table, data } = funcProps
          const labelName = table.labelName ? '【' + data[table.labelName] + '】' : ''
          table.dialogLabel = '编辑' + table.label + labelName
          table.dialogFormValues = cloneDeep(data)
          table.dialogFormList = data.isAll ? target.show : target.hide
          table.dialogButtonList = table.updateButtonList
          table.dialogVisible = true
        },
        isShow (data) {
          return !data.push
        }
      }],
      tableInitList: ['title', 'text', 'userName', 'createTime', 'updateTime', 'push'],
      tableFullList: ['title', 'text', 'userName', 'createTime', 'updateTime', 'push'],
      createList: ['title', 'text', 'resFiles', 'isAll', 'orgId', 'userIds'],
      updateList: ['title', 'text', 'resFiles', 'isAll', 'orgId', 'userIds'],
      filterInitList: ['title', 'text', 'userId', 'push'],
      filterFullList: ['title', 'text', 'userId', 'push'],
      createFormValues: {
        title: '',
        text: '',
        isAll: false,
        // orgId: [],
        orgIds: [],
        roleIds: [],
        userIds: []
      },
      createButtonList: [createButton, {
        ...createButton,
        name: 'publish',
        label: '保存并发布',
        funcProps: {
          ...createButton.funcProps,
          callback (table, data) {
            table.$post({
              url: `/dxbase/push/pusher/${data.id}`
            }).then(data => {
              table.getData()
              table.dialogVisible = false
            })
          }
        }
      }],
      updateButtonList: [updateButton, {
        ...updateButton,
        name: 'publish',
        label: '保存并发布',
        fun: {
          el: this
        },
        funcProps: {
          ...updateButton.funcProps,
          callback (table, data, id) {
            table.$post({
              url: `/dxbase/push/pusher/${id}`
            }).then(data => {
              table.getData()
              table.dialogVisible = false
            })
          }
        }
      }],
      columns: {
        title: {
          label: '公告标题',
          filter: {
            type: 'input',
            like: true
          },
          form: {
            type: 'input',
            rules: [{
              type: 'required',
              message: '请输入公告标题'
            }]
          }
        },
        text: {
          label: '公告内容',
          filter: {
            type: 'input',
            like: true
          },
          form: {
            type: 'textarea',
            rules: [{
              type: 'required',
              message: '请输入公告内容'
            }]
          }
        },
        userName: {
          label: '发布人'
        },
        userId: {
          label: '发布人',
          render: {
            type: 'select'
          },
          filter: {
            type: 'select',
            live: true
          },
          relation: 'users'
        },
        createTime: {
          label: '创建时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm'
        },
        updateTime: {
          label: '修改时间',
          render: {
            type: 'time'
          },
          dateType: 'YYYY-MM-DD HH:mm'
        },
        push: {
          label: '是否已发布',
          render: {
            type: 'select'
          },
          filter: {
            type: 'select'
          },
          relation: 'yesOrNo'
        },
        isAll: {
          label: '是否全部人',
          render: {
            type: 'select'
          },
          form: {
            type: 'select',
            chains: [{
              type: 'visiable',
              target: {
                show: ['title', 'text', 'isAll'],
                hide: ['title', 'text', 'isAll', 'orgId', 'userIds']
              }
            }]
          },
          relation: 'yesOrNo'
        },
        orgId: {
          label: '组织',
          render: {
            type: 'select'
          },
          relation: 'orgs',
          form: {
            type: 'cascader',
            live: true,
            chains: [{
            //   type: 'value',
            //   target: 'userIds'
            // }, {
              type: 'optionFilter',
              target: 'userIds'
            // }, {
            //   type: 'clear',
            //   target: 'userIds'
            }, {
              type: 'function',
              func ({ name, funcProps, optionFilter, value, columns }) {
                const orgChildren = treeChildren(columns[name].options, value)
                optionFilter.userIds = (data) => {
                  return orgChildren.indexOf(data.parentId) >= 0
                }
              }
            }]
          }
          // 树状组织多选
          // form: {
          //   type: 'tree',
          //   live: true,
          //   chains: [{
          //     type: 'optionFilter',
          //     target: 'userIds'
          //   }, {
          //     type: 'clear',
          //     target: 'userIds'
          //   }, {
          //     type: 'value',
          //     target: 'userIds'
          //   }, {
          //     type: 'function',
          //     target: 'userIds',
          //     func ({ name, target, funcProps, optionFilter, value, columns, formValues }) {
          //       let ArrayString = Object.keys(columns[name].options)
          //       let ArrayInt = ArrayString.map(item => {
          //         return parseInt(item)
          //       })
          //       const orgChildren = intersection(ArrayInt, value)
          //       optionFilter.userIds = (data) => {
          //         return orgChildren.indexOf(data.parentId) >= 0
          //       }
          //     }
          //   }]
          // }
        },
        roleIds: {
          label: '角色',
          form: {
            type: 'select',
            multiple: true,
            live: true
          },
          relation: 'roles'
        },
        userIds: {
          label: '用户',
          // render: ({columns}) => {
          //   // console.info('columns:', columns.options)
          //   type: 'select'
          // },
          render: {
            type: 'select'
          },
          form: {
            type: 'select',
            multiple: true,
            live: true,
            rules: [{
              type: 'required',
              message: `请选择用户`
            }]
          },
          // relation: 'readingUsersByAuth'
          relation: 'users'
        },
        resFiles: {
          label: '公告图片',
          form: {
            type: 'upload',
            fieldName: 'files',
            resource: 'upload?resType=NOTICE'
          }
        }
      }
    }
  }
}
</script>
